<template>
  <div>
    <Base :moddle="moddle" :bo="bo" @sync="sync" @write="write">
      <template #custom>
        <slot name="eventDefinition" />
        <slot name="detail" />
        <CollapseItem title="Asynchronous Continuations">
          <template #content>
            <FormItemSwitch
              v-if="propertyVisible('asyncBefore')"
              v-model="bo.asyncBefore"
              label="Asynchronous Before"
            />
            <FormItemSwitch
              v-if="propertyVisible('asyncAfter')"
              v-model="bo.asyncAfter"
              label="Asynchronous After"
            />
            <template v-if="bo.asyncBefore || bo.asyncAfter">
              <FormItemSwitch
                v-if="propertyVisible('exclusive')"
                v-model="bo.exclusive"
                label="Exclusive"
              />
            </template>
          </template>
        </CollapseItem>
        <CollapseItem v-if="bo.asyncBefore || bo.asyncAfter" title="Job execution">
          <FormItemInput
            v-if="propertyVisible('jobPriority')"
            v-model="bo.jobPriority"
            label="Job Priority"
            prop="jobPriority"
          />
          <FormItemInput
            v-if="propertyVisible('failedJobRetryTimeCycle')"
            v-model="bo.failedJobRetryTimeCycle"
            label="Retry Time Cycle"
            prop="failedJobRetryTimeCycle"
          />
        </CollapseItem>
        <CollapseItem v-if="ioVisible && ioSupported" title="Input/Output">
          <el-form-item slot="content">
            <el-badge :value="ioLength">
              <el-button @click="showIO = true">
                {{ $customTranslate('Update') }}
              </el-button>
            </el-badge>
          </el-form-item>
        </CollapseItem>
      </template>
    </Base>
    <InputOutput v-if="showIO && ioVisible" :moddle="moddle" :io="io" @save-io="saveIO" @close="showIO = false" />
  </div>
</template>

<script>
import Base from './Base'
import InputOutput from '../part/detail/InputOutput'
import CollapseItem from '../ui/CollapseItem'
import FormItemInput from '../ui/FormItemInput'
import FormItemSwitch from '../ui/FormItemSwitch'
import areaHelper from '../../mixins/areaHelper'
import { is } from 'bpmn-js/lib/util/ModelUtil'
import { customize, isInputOutputSupported } from '../../utils'
import { addAndRemoveElementsFromExtensionElements } from '../../utils/creators'

const ELEMENT_NAME = 'InputOutput'

export default {
  name: 'Common',
  components: {
    Base,
    InputOutput,
    CollapseItem,
    FormItemInput,
    FormItemSwitch
  },
  mixins: [areaHelper],
  data() {
    return {
      io: null,
      showIO: false,
      ioSupported: isInputOutputSupported(this.element.businessObject)
    }
  },
  computed: {
    ioLength: {
      get() {
        return (this.io?.inputParameters?.length ?? 0) + (this.io?.outputParameters?.length ?? 0)
      },
      set(newValue) {
        return newValue
      }
    },
    ioVisible() {
      return this.propertyVisible('io')
    }
  },
  watch: {
    'bo.asyncBefore'(val) {
      this.write({ asyncBefore: val })
    },
    'bo.asyncAfter'(val) {
      this.write({ asyncAfter: val })
    },
    'bo.exclusive'(val) {
      this.write({ exclusive: val })
    },
    'bo.jobPriority'(val) {
      this.write({ jobPriority: val })
    },
    'bo.failedJobRetryTimeCycle'(val) {
      this.write({ failedJobRetryTimeCycle: val })
    }
  },
  created() {
    this.init()
  },
  methods: {
    sync() {
      this.$emit('sync')
      this.init()
    },
    init() {
      this.io = this.bo.extensionElements?.values?.find(item => is(item, customize(ELEMENT_NAME)))
    },
    saveIO(io) {
      this.showIO = false
      this.io = io
      const
        matcher = item => !is(item, customize(ELEMENT_NAME)),
        objectsToAdd = io ? [io] : undefined
      this.write({ extensionElements:
          this.bo.extensionElements = addAndRemoveElementsFromExtensionElements(this.moddle, this.bo, objectsToAdd, matcher)
      })
    }
  }
}
</script>
